<!--
 * @Author: guojinxin_hub 1907745233@qq.com
 * @Date: 2024-09-12 15:13:38
 * @LastEditors: guojinxin_hub 1907745233@qq.com
 * @LastEditTime: 2024-09-13 16:57:32
 * @FilePath: \new-yongqing\src\components\Lease_title\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="alease_title_left">
    <img :src="'/img/首页/' + imgSrc" class="title_icon" />
    <div class="title-text">
      <span><slot>城市治理</slot></span>
    </div>
    <img
      class="title_rectangle_icon"
      src="~@/assets/images/基础/rectangle.png"
    />
    <img
      class="title_bottom_icon"
      src="~@/assets/images/基础/tiltle1_bg@2x.png"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/index.vue'

const props = defineProps({
  left: {
    type: Number,
    default: 20,
  },
  imgSrc: {
    type: String,
    default: 'icon_data@2x.png',
  },
})
const switchValue = ref(false)
const handleSwitchChange = (bool: boolean) => {
  switchValue.value = bool
}
</script>
<style lang="scss" scoped>
.alease_title_left {
  position: relative;
  font-family: Oppo;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 100;
  width: 644px;
  height: 44px;
  font-size: 16px;
  overflow: hidden;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

  padding-bottom: 22px;
  margin-top: 20px;
  .title_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    //@include boxMarginLeft(v-bind("(props.left )"));
    width: 30px;
    height: 30px;
    position: relative;
    margin-left: 26px;
  }
  .title_bottom_icon {
    position: absolute;
    width: 100%;
    top: 75%;
    z-index: 1000;
  }
  .title_rectangle_icon {
    position: relative;
    height: 28px;
    right: 96px;
  }
  .title-text {
    flex: 1;
    margin-left: 10px;
    position: relative;
    @include Top(1);
    width: fit-content;

    span {
      font-size: 36px;
      //font-weight: 600;
      letter-spacing: 1px;
      text-shadow: 0 2px 4px rgba(94, 184, 255, 0.5);
    }
  }

  .right-box {
    margin-left: auto;
    background: #000;
    margin-right: 10px;
    //@include MarginBottom(6);
  }
}
</style>
